<template>
  <div class="container-demo">
    <div class="aside-nav">
      <nav-menu :menus="menus" />
    </div>
    <div class="aside-center">
      <router-view />
    </div>
  </div>
</template>

<script>
import NavMenu from '@/components/subMenu/NavMenu'
export default {
  name: 'Demo',
  components: {
    NavMenu
  },
  data() {
    return {
      menus: [
        {
          title: '整理的组件列表',
          url: '/demo',
          children: [
            {
              title: 'echarts',
              url: '/demo/echarts',
              children: []
            },
            {
              title: '收缩容器',
              url: '/demo/container',
              children: []
            },
            {
              title: '搜索框',
              url: '/demo/search',
              children: []
            },
            {
              title: '菜单',
              url: '/demo/menu',
              children: []
            },
            {
              title: 'listView',
              url: '/demo/listview',
              children: []
            },
            {
              title: 'formPanel',
              url: '/demo/formpanel',
              children: []
            },
            {
              title: 'drawer',
              url: '/demo/drawer',
              children: []
            },
            {
              title: 'forminput',
              url: '/demo/forminput',
              children: []
            },
            {
              title: 'tablelist',
              url: '/demo/tablelist',
              children: []
            }
          ]
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.container-demo {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;

  .aside-nav {
    background: #07274a;
    box-sizing: border-box;
    overflow: hidden;
    width: 300px;
    height: 100%;
  }

  .aside-center {
    flex: 1;
    width: 100%;
    height: 100%;
  }
}
</style>
